<button (click)="openModal()" class="wayne-button primary"
        *ngIf="authService.currentAppPermission.service.create || authService.currentUser.admin">
  创建负载均衡
</button>

<create-edit-service (create)="createService($event)"></create-edit-service>
<div *ngIf="serviceId && services?.length>0">
  <wayne-tabs>
    <wayne-tab (click)="tabClick(service.id)"
               [id]="service.id"
               *ngFor="let service of services"
               [active]="service.id==serviceId"
               [description]="service.description"
    >
      {{service.name}}
    </wayne-tab>
  </wayne-tabs>
  <div class="table-search">
    <div class="table-search-left">
      <button (click)="createServiceTpl()" class="wayne-button normal"
              *ngIf="serviceTpls?.length <= 0 && (authService.currentAppPermission.service.create || authService.currentUser.admin)">
        创建负载均衡模版
      </button>
      <button (click)="editService()" class="wayne-button normal"
              *ngIf="authService.currentAppPermission.service.update || authService.currentUser.admin">
        编辑负载均衡
      </button>
      <button (click)="publishHistory()" class="wayne-button normal"
              *ngIf="authService.currentAppPermission.service.read || authService.currentUser.admin">
        发布历史
      </button>
      <button (click)="deleteService()" class="wayne-button normal"
              *ngIf="authService.currentAppPermission.service.delete || authService.currentUser.admin">
        删除负载均衡
      </button>
      <button class="wayne-button normal" (click)="diffTpl()">{{'BUTTON.COMPARE_TEMPLATES' | translate}}</button>
      <wayne-filter-box (confirm)="confirmEvent()" (cancel)="cancelEvent()">
        <wayne-checkbox-group [(ngModel)]="showList">
          <wayne-checkbox>创建时间</wayne-checkbox>
          <wayne-checkbox>端口号</wayne-checkbox>
          <wayne-checkbox>上线机房</wayne-checkbox>
          <wayne-checkbox>发布说明</wayne-checkbox>
          <wayne-checkbox>创建者</wayne-checkbox>
          <wayne-checkbox>操作</wayne-checkbox>
        </wayne-checkbox-group>
      </wayne-filter-box>
    </div>
    <div class="table-search-right">
      <div class="clr-toggle-wrapper">
        <input type="checkbox" id="search-online" [(ngModel)]="isOnline" name="toggle-basic" class="clr-toggle" (change)="onlineChange()">
        <label for="search-online">{{'MESSAGE.ONLY_ONLINE_TEMPLATE' | translate}}</label>
      </div>
    </div>
  </div>
  <list-service [services]="services"
                (cloneTpl)="cloneServiceTpl($event)"
                [serviceTpls]="serviceTpls"
                (edit)="editService()"
                (paginate)="retrieve($event)"
                [appId]="appId"
                [showState]="showState"
                [page]="pageState.page"></list-service>
</div>

